"""
@author: Gaoyaoxia
@date: 2021-03-09 10:36:41
"""
<!--  -->
<template>
  <div class="">
    <a-modal
      centered
      width="750px"
      :visible="visible"
      :title="title"
      @cancel="cancel"
    >
      <slot></slot>
      <div class="transfer">
        <a-transfer
          :data-source="mockData"
          :rowKey="(record) => record.dataIndex"
          :titles="['选择列出项', '已选择列出项']"
          :target-keys="targetKeys"
          :render="(item) => item.title"
          @change="handleChange"
        />
      </div>
      <template slot="footer">
        <a-button key="submit" type="primary" @click="handleOk">
          确定
          <!-- 点击确定后 要将数据保存请求后台接口 -->
        </a-button>
        <a-button key="reset" class="btn-reset" @click="handleReset">
          重置
        </a-button>
        <a-button key="close" @click="cancel"> 关闭 </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { parseJson } from 'assets/js/utils'
export default {
  props: {
    title: {
      type: String,
      default: '委员查询列名选择'
    },
    visible: {
      type: Boolean,
      default: false
    },
    mockData: {
      type: Array,
      default: () => []
    },
    currentKeys: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      targetCols: [],
      targetKeys: this.currentKeys
    }
  },
  computed: {},
  watch: {
    currentKeys(val) {
      this.targetKeys = val
    }
  },
  mounted() {},
  methods: {
    handleChange(targetKeys, direction, moveKeys) {
      let targetCols = []
      this.targetKeys = targetKeys
      targetKeys.forEach((item, index) => {
        let col = parseJson(this.mockData, item)
        targetCols.push(col)
      })
      this.targetCols = targetCols
    },

    handleOk() {
      //确定后,将已选中的列项的chosen设置true,去请求保存接口
      this.targetCols.map((item) => {
        item.chosen = true
      })
      this.$emit('ok', this.targetCols)
    },
    handleReset() {
      this.targetKeys = []
      this.targetCols = []
    },
    cancel() {
      this.$emit('cancel')
    }
  },
  created() {}
}
</script>
<style lang='less' scoped>
.transfer {
  display: flex;
  justify-content: center;
  min-height: 340px;
  padding-top: 14px;
}
/deep/.ant-transfer-list {
  width: 198px;
  height: 340px;
  border-radius: 2px;
}
/deep/.ant-btn-icon-only.ant-btn-sm {
  height: auto;
  margin: 8px 0px;
}
</style>